<!--
  功能：表单item
  时间：2023年04月17日 16:59:14
-->
<template>
  <div class="form-item flex">
    <div class="form-left" :style="`width:${width}px`">
      <div><span v-if="required">*</span>{{ name }} :</div>
    </div>
    <div class="form-right" :style="`width: calc(100% - ${width}px)`">
      <slot></slot>
      <div class="sub-name">{{ subName }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    name: string;
    subName?: string;
    required?: boolean;
    width?: number;
  }>(),
  {
    width: () => 180, //左边宽度
  }
);
</script>

<style scoped lang="scss">
.form-item {
  margin-bottom: 30px;
  align-items: flex-start;
  .form-left {
    line-height: 30px;
    text-align: right;
    position: relative;
    padding-right: 20px;
    span {
      color: #c00;
      margin-right: 3px;
      display: inline-block;
    }
  }
  .sub-name {
    line-height: normal;
    font-size: 12px;
    margin-top: 2px;
    color: #888;
  }
}
</style>
